<template>
    <page-header-wrapper>
      <a-card :bordered="false">
        <div class="switch-cls">
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="企业推送" >
              <a-switch checked-children="开" un-checked-children="关" @change="statusChange" v-model="form.switchVal" :loading="loading" />
            </a-form-model-item>
          </a-form-model>
        </div>
        <div class="tip">
          <span>备注：</span>
          <span>该开关可打开根据用户发布的产品需求信息，匹配对应的企业，包括产品供需间的关联，产品相似度、同义词等灵活匹配，推送合适企业产品需求给用户</span>
        </div>
      </a-card>
    </page-header-wrapper>
</template>
<script>
import { getPushStatus, updatePushStatus } from '@/api/sendManage'
export default {
  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      form: {
        switchVal: true
      },
      loading: false
    }
  },
  created() {
    this.getPushStatus()
  },
  methods: {
    // 获取当前开关状态
    getPushStatus() {
      getPushStatus().then(res => {
        if(res.code && res.code === 200) {
          const { paramValue } = res.data
          this.form.switchVal = paramValue === '1'
        }else {
          this.$message.error('获取开关状态失败')
        }
      }).catch(err => {
        if(err) {
          this.$message.error('服务器错误')
        }
      })
    },
    // 更改按钮状态
    statusChange(checked) {
      let data = {
        paramKey: 'masterKeySwitch',
        paramValue: checked ? 1 : 0
      }
      this.loading = true
      updatePushStatus(data).then(res => {
        if(res.code && res.code === 200) {
          this.form.switchVal = checked
          this.$message.success('开关更改成功')
          this.loading = false
        }else {
          this.$message.error('开关更改失败')
          this.form.switchVal = !checked
          this.loading = false
        }
      }).catch(err => {
        if(err) {
          this.$message.error('服务器错误')
          this.form.switchVal = !checked
          this.loading = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ant-card {
  .switch-cls {
    .ant-switch {
      margin-bottom: 5px;
      min-width: 55px;
      height: 26px;
      background-color: #f56c6c;
      &::after {
        top: 2px;
        width: 20px;
        height: 20px;
      }
    }
    .ant-switch.ant-switch-checked {
      background-color: #67c23a;
    }
    ::v-deep .ant-form {
      .ant-form-item {
        .ant-col-2 {
          width: 5.333333%;
          margin-right: 10px;
          label {
            font-size: 18px;
            font-weight: 700;
            &::after {
              content: '';
            }
          }
        }
      }
    }
  }
  .tip {
    font-size: 16px;
    margin-top: 10px;
  }
}
</style>